<template>
  <div id="view">
    <div class="w1200">
      <p class="guide">
        <router-link to="/machinemarket">算力市场&nbsp;&nbsp;>&nbsp;</router-link>
        <span>订单总览</span>
      </p>
      <div id="pageContent">
        <section id="sec1">
          <p class="title">算力包信息</p>
          <div class="cl">
            <span>
              <span class="name">名称:</span>
              <span class="message">{{machine.name}}</span>
            </span>
            <span>
              <span class="name">基础算力:</span>
              <span class="message">{{machine.base_power}}T</span>
            </span>
            <span v-if="machine.bhp_power > 0">
              <span>BHP参配算力:</span>
              <span>{{machine.bhp_power}}T</span>
            </span>
          </div>
          <div class="cl">
<!--            <span>-->
<!--              <span class="name">期货算力:</span>-->
<!--              <span class="message">{{machine.futures_power}}T</span>-->
<!--            </span>-->
<!--            <span>-->
<!--              <span class="name">定期算力:</span>-->
<!--              <span class="message">{{machine.regular_power}}T</span>-->
<!--            </span>-->
            <span>
              <span class="name">单价:</span>
              <span class="message">{{unitPirce}}{{selectedPayType}}</span>
            </span>
            <span>
              <span class="name">合约类型:</span>
              <span class="message">BTC</span>
            </span>
          </div>
          <div class="cl">
            <span>
              <span class="name">合约期限:</span>
              <span class="message">{{machine.regular_date_num}}天</span>
            </span>
            <span>
              <span class="name">开挖时间:</span>
              <span class="message">{{machine.time_income}}</span>
            </span>
            <span>
              <span class="name">算力来源:</span>
              <span class="message">{{machine.power_node_name}}</span>
            </span>
          </div>
          <p class="p1">
            <span class="name">购买份额:</span>
            <input type="number" placeholder="" @input="numChange()"  @blur="outInput()" v-model="num">
            <span class="unitName">份</span>
            <span class="powerMoney">算力金额:&nbsp;&nbsp;{{powerMoney}}{{selectedPayType}}</span>
          </p>
        </section>
        <section id="sec2" v-if="includeElectric == false">
          <p class="p1">
            <span class="title">充值电费包</span>
            <span class="mark">囤币必备</span>
            <span class="right">
              <span>预计每日电费:{{this.numSlice(electricUnitPrice , selectedPayType === 'CNY' ? 2 : 4 )}} {{selectedPayType}}</span>
              <span v-if="machine && machine.electric_price">合约电价:{{Number(machine.electric_price[selectedPayType])}} {{selectedPayType}}/度</span>
            </span>
          </p>
          <p class="p2">电费包天数用完，矿机将停机没有产出，请关注电费包剩余情况，及时充值</p>
          <div class="d3">
            <span class="addTitle">充值天数:</span>
            <input type="number" v-model="inputDays">
            <span class="daysName">天</span>
            <span class="curDays"  :class="selectedDaysIndex == index ? 'chosed':'' " v-for="(item , index ) in electricDaysArr" @click="clickDays(item.value , index)">
            {{item.value}}天
            </span>
    <!--        <span class="curDays chosed">60天</span>
            <span class="curDays">180天</span>
            <span class="curDays">360天</span> -->
          </div>
          <p class="p4" v-if="disacountArr.length > 0">
            <span class="discount">充值优惠：</span>
            <span class="span2">一次性&nbsp;&nbsp;</span>
            <span class="introduce" v-for="(item , index ) in electricDaysArr">
              <span>充值滿{{item.value}}天</span><span v-if="item.defaultPre > 0">享{{item.disPre}}折扣</span>；
            </span>
          </p>
          <p class="p5">
            <span class="electric">电费包金额:</span>
            <span class="electricMoney">{{electricMoney}} {{selectedPayType}}</span>
          </p>
          <p class="p6" v-if="canBtcDeduction">
            <label for="disacountBtc">
              <input type="checkbox" id="disacountBtc" class="hoverhand" v-model="btcDeduction">
              <span>BTC抵扣电费</span>
            </label>
          </p>
          <p class="p7">预缴电费不足时，矿机将停机，勾选后每日12点系统自动按实时汇 率从BTC资产余额中扣除电费，请保持余额充足。(BHP在BHPay 钱包发放， 目前仅支持BTC抵扣)</p>
        </section>
        <section id="sec3" v-if="machine && machine.insurance_id && Number(machine.insurance_id) > 0">
          <p class="p1">
            <label for="mathBb">
              <input type="checkbox" id="mathBb" class="hoverhand" v-model="buyMathPower">
              <span>BTC选购算力宝，产出享保障</span>
            </label>
            <span class="hoverhand rule" @click="mathPowerRule">规则</span>
          </p>
          <p class="p2">
            <span>算力宝金额:</span>
            <span>{{mathPowerTotalMoney}} {{selectedPayType}}</span>
          </p>
          <div class="d3">
            <p>1.每日分币后计算产出进度，产出进度=当前的累计产币量*实时币价/合约已支付金额；</p>
            <p>2.合约期内，若产出进度达到100%，次日转入产出共享阶段，用户后续分币比例调整为70%；</p>
            <p>3.合约到期，若产出进度仍不足100%，算力宝销售方以BTC向用户补足差额；</p>
            <p>4.加购算力宝需一次性充值合约期所有电费；</p>
          </div>
        </section>
        <section id="sec4">
          <p class="p1 payType">
            <span class="name">选择支付方式:</span>
            <span class="allTypes">
              <span v-for="(item , index) in pay_channel" :class="selectedPayType == item.pay_currency ? 'active' : ''"
                    @click="chosePayType( item.pay_currency , item.payUnit)">
                {{item.pay_currency}}
              </span>
            </span>
          </p>
          <p class="p2">
            <span class="name">可用余额：</span>
            <span>{{asset[selectedPayType]}}{{selectedPayType}}</span>
          </p>
          <p class="p3">总计</p>
          <div class="p4">
           <span class="btcPower">
              <span class="introduce">
                <span class="span1">到手总算力</span>
<!--                <img src="../common/imgs/explain2.png" alt="" class="btnImg hoverhand">-->
              </span>
             <span class="span2">{{totalBasePower}}{{machine.unit_name}}</span>
           </span>
           <span class="bhpPower" v-if="machine && Number(machine.bhp_power) > 0">
              <span class="introduce">
                <span class="span1">到手BHP总算力</span>
                <!-- <img src="../common/imgs/explain2.png" alt="" class="btnImg hoverhand"> -->
              </span>
             <span class="span2">{{totalBhpPower}}{{machine.unit_name}}</span>
           </span>
           <span>
              <span class="introduce">
                <span class="span1">总金额(算力包+电费包+算力宝)</span>
              </span>
             <span class="span2">{{lastTotalMoney}} {{selectedPayType}}</span>
           </span>
         </div>
          <div class="p5">
           <label for="agree">
             <input type="checkbox" id="agree" v-model="agree">
             <span>我同意</span>
           </label>
           <span class="agreement" v-for="(item , index) in contract" @click="showAgreement(item.code)">《{{item.name}}》</span>
           <span class="agreement" @click="showAgreement('hign')" v-if="buyMathPower">《{{machine.insurance_contract.name}}》</span>
         </div>
          <div class="p6">
           <button id="justPay" @click="justPay()">立即支付</button>
           <span :id="tdspan" class="tdspan hoverhand" v-show="is_tongdun_on == 1 && showTd"></span>
          </div>
        </section>
      </div>
     </div>
     <introduce-dialog ref="dl"/>
     <agree-ment ref="ag" hasReadText="已阅读此协议" @isRead=""/>
     <confirm-dialog ref="buyConfirm" msg="确定购买此订单？" @confirm="confirmBuy"/>
     <confirm-dialog ref="buyMathPowerConfirm" msg=" " @confirm="confirmBuyMathPower" @cancel="notBuyMathPower"/>
  </div>
</template>
<script>
  import { getMachineDetail , orderAgreement , orderRent } from "../http/api";
  export default {
    name: 'classicMachineDetail',
    data() {
      return {
        machine_id : null,//矿机id
        machine: {}, //矿机信息
        tdspan:'td' + Math.floor(Math.random()*(1-10000) + 10000), //同盾绑定id
        yzm_token :null,//同盾TOKEN
        blackBox:null,//同盾getInfo,
        reset:null,//同盾重载方法
        showTd : true,//页面判断同盾显示条件
        is_tongdun_on : 0,//是否开启同盾
        agree : false,//是否同意协议
        contract : [],//协议
        /*---------------------------------*/
        totalBasePower : '',//到手总算力
        totalBhpPower : '',//到手bhp总算力
        canBtcDeduction : true,//是否展示btc抵扣电费
        btcDeduction : false,
        pay_channel : [],//支付方式 包括余额
        selectedPayType : '',//选择的支付方式
        asset : [],//余额
        num : 0,//购买份数
        minNum : 0,//最低购买数量
        maxNum : 0,//最大购买数量
        unitPirce : 0,//单价
        powerMoney : 0,//算力金额
        electricDaysArr : [],//电费天数数组
        disacountArr : [],//电费打折数的数组
        selectedDaysIndex : 0 , //选择的电费天数的index
        inputDays : 0,//输入的充值电费天数
        electricUnitPrice : 0,//预计每日电费
        includeElectric : false,//是否包电费！！！！！！！！！！
        electricMoney : 0,//电费总金额
        lastTotalMoney : 0,//最终需支付金额
        buyMathPower : false,//是否购买算力宝
        mathPowerTotalMoney : 0,//算力宝总金额
        chose_coupons : [],//选择的优惠券
        deductionNum : '',//优惠券抵扣金额
        bhp_power : 0 ,//是否是双挖
      }
    },
    components:{
      tongdunCountdown: resolve => { require(['../components/tongdunCountdown'], resolve) },//同盾倒计时功能插件
      AgreeMent: resolve => { require(['../components/AgreementDialog'], resolve) },//协议弹窗
      ConfirmDialog: resolve => { require(['../components/ConfirmDialog'], resolve) },//确认弹窗
      introduceDialog : resolve => { require(['../components/IntroduceDialog'], resolve) },
    },
    mounted() {
      let machine_id = this.$route.query.machine_id , thiz = this;
      this.machine_id = machine_id;
      getMachineDetail({   machine_id: machine_id }).then(res => {
        let data = res.data;
        let machine = data.machine;
        this.machine = machine;
        this.contract = machine.contract;//协议
        let pay_channel = machine.pay_channel;//支付方式
        let good_deposit = machine.good_deposit;//价格
        if(good_deposit.length === 1){
          for( let i = pay_channel.length-1 ; i >= 0; i--){
            let item = pay_channel[i];
            if( item === 'RRM_USDT'){
              pay_channel = thiz.arrRemove( pay_channel , i);
              break;
            }
          }
        }
        this.pay_channel = pay_channel;//支付方式 ，组装进余额
        this.maxNum = machine.maxLimitNum;//最大购买数量
        this.minNum = machine.minLimitNum;//最低购买数量
        this.num = this.minNum;
        this.packagePayArr(data);
        let is_tongdun_on = machine.is_tongdun_on;//是否开启同盾;
        thiz.is_tongdun_on = is_tongdun_on;
        if( is_tongdun_on == 1 ){
          thiz.openTongdun();// 判断是否需要开起同盾
        };
        thiz.includeElectric = machine.type == 11 ? false : true; //是否包电
        /* -----------组装电费数组------------*/
        if(!thiz.includeElectric){
          let elecArr = [],
            disacountArr = [],
            elecCifg = machine.electricity_config;
          for (var i in elecCifg) {
            var thisValue = {
              value: i,
              disNum: thiz.accSub(1, elecCifg[i]),
              disPre: thiz.accMul(thiz.accSub(1, elecCifg[i]), 10),
              defaultPre : elecCifg[i] ,
              defaultPre100 :thiz.accMul(elecCifg[i] , 100) ,
              isshow: elecCifg[i] > 0 ? true : false
            };
            elecArr.push(thisValue);
            if(Number(thisValue.disPre) < 10){
              disacountArr.push(thisValue.disPre);
            }
          }
          this.disacountArr = disacountArr;
          console.log('disacountArr',disacountArr);
          thiz.electricDaysArr = elecArr;
          thiz.inputDays = elecArr[0].value;
        }
        /* -----------------------*/
      });
    },
    watch:{
      num(val){
        let thiz = this;
        this.totalBasePower = thiz.accMul(thiz.machine.base_power , val || thiz.minNum);
        this.totalBhpPower = Number(thiz.machine.bhp_power) > 0 ? thiz.accMul(thiz.machine.bhp_power , val || thiz.minNum) : 0;
        this.numChange();
        this.getMathPowerMoney();
      },
      buyMathPower( val ){
        let thiz = this;
        this.numChange();
        let electricDaysArr = this.electricDaysArr;
        let maxDays = electricDaysArr.length > 0 ?  electricDaysArr[ electricDaysArr.length - 1 ].value : 0;
        if ( val && electricDaysArr && Number(thiz.inputDays) < Number(maxDays)) {
          thiz.dialogSelMaxDays();
        } else{
          this.getMathPowerMoney();
        }
      },
      inputDays(val){
        let electricDaysArr = this.electricDaysArr;
        let maxDays = electricDaysArr[ electricDaysArr.length - 1 ].value;
        var isMax = Number(val) >= Number(maxDays);
        this.canBtcDeduction = isMax ? false : true;
        if(isMax){
          this.btcDeduction = false;
        }else{
          this.buyMathPower = false;
        }
        this.mathElectic();
      },
      selectedPayType(val){
        let good_deposit = this.machine.good_deposit;//支付 单价
        let thiz = this;
        this.for( good_deposit , (item , index) => {
          if(item.pay_currency === val){
            thiz.unitPirce = Number(item.goods_deposit);//单价
          }
        });
        this.numChange();
        this.mathElectic();
        this.getMathPowerMoney();
      }
    },
    methods: {
      reminderToBindBhpay(){
        //双挖 没绑定bhpay ，提示去绑定bhpay
      },
      packagePayArr(data){
        let asset = data.asset;
        let good_deposit = data.machine.good_deposit;
        this.asset = asset;
        let pay_channel = this.pay_channel;
        this.for(pay_channel , (item ,index) => {
          let itemType = { payUnit : item };
          switch (item) {
            case "RRM_CASH":
              itemType.pay_currency = 'CNY';//币种名称
              itemType.balance = asset.CNY;//余额
              break;
            case 'RRM_USDT':
              itemType.pay_currency = 'USDT';
              itemType.balance = asset.USDT;
              break;
            case 'RRM_BCNY':
              itemType.pay_currency = 'BCNY';
              itemType.balance = asset.BCNY;
              break;
          }
          this.for(good_deposit , (item , index) => {
            if(itemType.pay_currency === item.pay_currency){
               itemType.goods_deposit = item.goods_deposit; //单价
            }
          });
          pay_channel[index] = itemType;
        });
        this.pay_channel = pay_channel;
        this.selectedPayType = pay_channel[0].pay_currency;
      },
      chosePayType(pay_currency , payUnit){
        this.selectedPayType = pay_currency;
      },
      outInput(){
        //失去焦点 输入框
        this.num = parseInt(this.num) || this.minNum;
        if (this.num <= this.minNum) {
          this.num = this.minNum
        }
      },
      clickDays( days , index ){
        this.selectedDaysIndex = index;
        this.inputDays = days;
        this.mathElectic();
      },
      numChange(){
        //数量变化
        let pay_channel = this.pay_channel;//支付方式、余额
        let selectedPayType = this.selectedPayType;//选择的支付方式
        let unitPirce = 3000 ;// 单价
        this.for(pay_channel , (item , index) => {
          if(selectedPayType === item.pay_currency){
            unitPirce = item.goods_deposit;
          }
        });
        this.mathElectic();
        if (this.num) {
          this.num = parseInt(this.num) || this.minNum;
          if (this.num >= this.maxNum) {
            this.num = this.maxNum
          }
          this.powerMoney = this.accMul(unitPirce, this.num ,0);//算力金额
        } else {
          this.powerMoney = this.accMul(unitPirce, this.minNum ,0);
        }
        this.getAllMoney();
      },
      mathElectic(){
        //计算电费
        let thiz = this;
        let sliceNum = this.selectedPayType === 'CNY'  ? 2 : 4;
        let machine = this.machine;
        if( !this.includeElectric ){
          let everyDaysPrice = this.selectedPayType === 'CNY' ? machine.predict_electricity : machine.predict_electricity_usdt;//矿机1T 每日价格
          thiz.electricUnitPrice = thiz.accMul(everyDaysPrice , thiz.num ) ;//预计每日电费
          let electric_price = machine.electric_price[this.selectedPayType];//合约每小时电价
          let disCount = 1;//电费打折数
          let electricDaysArr = this.electricDaysArr;//电费打折数组
          for( let i = electricDaysArr.length - 1;  i >=0 ; i -- ){
            if(Number(this.inputDays) >= Number(electricDaysArr[i].value)){
              disCount = electricDaysArr[i].disNum;
              break;
            } else{
              disCount = 1;
            }
          }
          thiz.electricMoney = thiz.numSlice(
            thiz.accMoreMul(machine.mine_power , '24' , machine.computing_power , thiz.num ,electric_price , thiz.inputDays , disCount) , sliceNum
          );
        }
        this.getAllMoney();
      },
      justPay(){
        let errorInfo = null;
        let num = this.num;
        if(!num || num < this.minNum || num > this.maxNum){
          errorInfo = '请输入正确购买份额';
        }else if( !this.agree ){
          errorInfo = '请同意协议';
        }
        if( errorInfo ){
          require('../common/js/toast').toast(errorInfo);
          return;
        }
        let balance = Number(this.asset[this.selectedPayType]);//可用余额
        let lastTotalMoney = Number(this.lastTotalMoney);//最终支付金额
        let thiz = this;
        if( lastTotalMoney > balance){
          require('../common/js/toast').toast(thiz.selectedPayType+'余额不足');
        }else{
          this.$refs.buyConfirm.dialogShow();
        }
      },
      confirmBuy(){
        /*弹窗确认下单*/
        let thiz = this;
        let chosePayUnit = null;//支付方式的代号
        let payArr = thiz.pay_channel;
        thiz.for( payArr, (item ,index) => {
          if( item.pay_currency === thiz.selectedPayType ){
            chosePayUnit = item.payUnit;
          }
        });
        let param = {
              machine_id : thiz.machine_id ,
              num : thiz.num ,
              pay_channel : chosePayUnit ,
              is_insurance : thiz.buyMathPower ? 1 : 0,
              electricity : thiz.inputDays,
              is_pay_electric : thiz.btcDeduction ? 1 : 0,
            };
        let recordIds = [];
        let chose_coupons = thiz.chose_coupons;
        thiz.for( chose_coupons , (item , index) => {
          recordIds.push(item.id);
        });
        if( recordIds.length > 0 ) {
          recordIds = recordIds.join(',');
          param.recordIds = recordIds;
        }
        orderRent(param).then(res => {
          if( res.code == 200 ){
           thiz.$router.push({ path : '/paymentSuccessful' , query: {
             orderId : res.data,
             payMoney : thiz.lastTotalMoney,
             payUnit : thiz.selectedPayType,
           }})
          }
        });
      },
      openTongdun( bl ){
        //开起同盾
        let tdPublic = require('../common/js/tongdun').default;
        let thiz = this;
        let params = {
          display : 'popup',
          container: '#' + thiz.tdspan,
          width: '300px',
          height: '46px',
          beforeValidate : function () {
            // if( !thiz.num ){
            //   require('../common/js/toast').toast('请输入下单数量');
            //   return false
            // }else{
            //   return true;
            // }
          }
        };
        tdPublic(params, function (ret) {
          thiz.showTd = false;
          thiz.yzm_token = ret.validateToken;
          thiz.blackBox = ret.blackBox;
          thiz.reset = ret.reset;//获取重载同盾方法
        });
      },
      mathPowerRule(){
        //算力宝规则弹窗
        //require("../common/imgs/jojojojop.png")
        // let imgSrc = require("../common/imgs/jojojojop.png");
        // let newImg = '<img src="'+imgSrc+'" alt="图片" style="width: 100%;">';
        // let text = require('../common/jsons/text').mathPowerRule.html;
        // this.$refs.dl.changeHtml(newImg+text);
        // this.$refs.dl.dialogShow();

        let imgSrc = require("../common/imgs/jojojojop.png");
        let newImage = new Image();
        newImage.src = imgSrc;
        let thiz = this;
        newImage.onload = function(){
          let newImg = '<img src="'+imgSrc+'" alt="图片" style="width: 100%;">';
          let text = require('../common/jsons/text').mathPowerRule.html;
          thiz.$refs.dl.changeHtml(newImg+text);
          thiz.$refs.dl.dialogShow();
        }
      },
      showAgreement( tar ) {
        /*查看协议*/
        let thiz = this;
        if(tar == 'hign'){
           thiz.$refs.ag.agreement( thiz.machine.insurance_contract.content );
           return;
        }
        let  params = {
            machine_id : thiz.machine.machine_id,
            code : tar,
            currency : thiz.selectedPayType,
            num : thiz.num
         };
        orderAgreement(params).then(res => {
          if( res.code == 200 ){
            thiz.$refs.ag.agreement( res.data.contact.content );
          }
        });
      },
      dialogSelMaxDays(){
        //选择算力宝，提示选择最大天数弹窗
        let maxDays = this.machine.constract_date_num;//最大购买天数
        let reminderInfo = "<span style='line-height:175%;padding:0 15px;display:inline-block;'>选购算力宝，需一次性支付<span style='color:#F67311;display:contents;'>合约期（"+maxDays+"天）</span>所有电费，已自动为您选择"+maxDays+"天电费包，请重新核对需支付金额。</span>";
        this.$refs.buyMathPowerConfirm.changeToast(reminderInfo);
        this.$refs.buyMathPowerConfirm.dialogShow();
      },
      notBuyMathPower(){
        //弹窗取消购买算力宝
        this.buyMathPower = false;
        this.canBtcDeduction = true;
        this.mathPowerTotalMoney = 0;
      },
      confirmBuyMathPower(){
        //确认购买算力宝
        this.buyMathPower = true;
        let electricDaysArr = this.electricDaysArr;
        let maxIndex = electricDaysArr.length - 1;
        this.inputDays = electricDaysArr[maxIndex].value;
        this.selectedDaysIndex = maxIndex;
        this.btcDeduction = false;
        this.canBtcDeduction = false;
        this.mathElectic();
        this.getMathPowerMoney();
      },
      getMathPowerMoney(){
        //计算算力宝金额
        if(this.buyMathPower){
          let selectedPayType = this.selectedPayType;//支付方式
          let thiz = this;
          let mathPowerUnitPrice = 0;//算力宝单价
          let machine = this.machine;
          let insurance = machine.insurance ?  machine.insurance : false;
          let stopLossRate = 0;//算力包产出下限百分比
          if( insurance ){
            stopLossRate = thiz.accDiv(insurance.stop_loss_rate, 100);//算力包产出下限百分比
            mathPowerUnitPrice = selectedPayType === 'CNY' ? insurance.cny_deposit : insurance.usdt_deposit;//算力宝单价
          }
          this.mathPowerTotalMoney = this.accMoreMul(thiz.num , mathPowerUnitPrice , machine.base_power);//算力宝总金额
        } else{
          this.mathPowerTotalMoney = 0;
        }
        this.getAllMoney();
      },
      getAllMoney(){
        let powerMoney = this.powerMoney;//算力金额
        let electricMoney = this.electricMoney;//电费金额
        let mathPowerTotalMoney = this.mathPowerTotalMoney;//算力宝金额
        let selectedPayType = this.selectedPayType;//支付方式
        let slideNum = selectedPayType === 'CNY' ? 2 : 4;
        let lastTotalMoney = this.accAddMore(powerMoney , electricMoney , mathPowerTotalMoney);//总金额
        this.lastTotalMoney = this.numSlice(lastTotalMoney , slideNum);
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #view{
    padding-top: 72px;padding-bottom: 90px;
    /deep/ #innerhtml{
      .showTips p {
        line-height: 150%;
        padding-top: 30px;
        .title{
          color: #262626;display: inline-block;width: 100%;padding-bottom: 10px;
        }
        img{
          width: 100%;vertical-align: middle;
        }
        .lz{
          padding-left: 0;display: inline-block;width: 100%;line-height: 150%;color: #898989;;
        }
      }
    }
  }
  .guide{
    padding: 21px 0;font-size: 16px;
    >a{
      .colorYellow;
    }
    >span{
      color: #262626;
    }
  }
  #pageContent{
    .borderRadius;padding-bottom: 66px;
    >section{
      padding: 29px 26px;background: #fff;margin-top: 12px;.borderRadius;
      .title{
        color: #262626;font-size: 24px;background: #fff;padding-bottom: 14px;
      }
      &:first-child{
        margin-top: 0;
      }
    }
    #sec1{
      padding-top: 29px;
      .title{
        color: #262626;font-size: 24px;background: #fff;padding-bottom: 14px;
      }
      .cl{
        overflow: hidden;height: 59px;border-bottom: 1px solid#EEEEEE;
        >span{
          float: left;font-size: 16px;
          >.name{
            color: #262626;
          }
          >.message{
            color: #262626a6;
          }
          >span{
            line-height: 59px;;
          }
        }
        >span:first-child{
           width: 308px;;
        }
        >span:nth-child(2){
          width: 376px;;
        }
        >span:nth-child(3){
          width: 303px;;
        }
      }
       >.p1{
          padding-top: 32px;overflow: hidden;
          >.name{
            padding-right:20px;line-height: 38px;color: #262626;font-size: 16px;
          }
         >span{
           float: left;
         }
         >input{
           .input;width:141px;height: 38px;float: left;text-align: center;border-color: #D2D2D2;
         }
         >.unitName{
           padding-left: 13px;line-height: 38px;
         }
         >.powerMoney{
           .colorYellow;line-height: 38px;padding-left: 27px;;
         }
       }
    }
    #sec4{
      >p{
        >.name{
          color: #262626;font-size: 16px;display: inline-block;line-height: 38px;;
        }
      }
      >.p1{
        padding-top: 32px;overflow: hidden;
      }
      .p1>.name{
          width: 135px;
      }
      >.p1{
        overflow: hidden;
        >span{
          float: left;
        }
        >.allTypes{
          overflow: hidden;
          >span{
            height: 38px;display: inline-block;width: 141px;margin-left: 11px;.borderRadius;text-align: center;line-height: 38px;
            font-size: 16px;color: #26262691;border: 1px solid#D2D2D2;
            &:first-child{
              margin-left: 0;
            }
            &:hover{
              cursor: pointer;
            }
            &.active{
              .borderYellow;background: #ffab3229;color: #FFAB32;
            }
          }
        }
      }
      >.p2{
        padding-top: 46px;font-size: 16px;
        >.name{
          line-height: 103%;
        }
      }
      >.p3{
       color: #2626269e;font-size: 16px;padding-bottom: 22px;padding-top: 36px;
      }
      >.p4{
        height: 99px;background: #F7F9FA;border-top: 1px solid#E5E5E5;border-bottom: 1px solid#E5E5E5;padding-left: 20px;overflow: hidden;
        >span{
          float: left;
          &.bhpPower{
            padding-left: 30px;
            .introduce{
              padding-right: 20px;
            }
          }
          &.btcPower{
            padding-left:0px;
            .introduce{
              padding-right: 20px;
            }
          }
          &:last-child{
            padding-left: 65px;
          }
          &:last-child{
            >.span2{
              padding-left: 14px;
            }
          }
          >span{
            line-height: 99px;
          }
          .introduce{
            float: left;height: 99px;
            >.span1{
              vertical-align: middle;line-height: 107px;
            }
            >.btnImg{
              vertical-align: sub;margin-right: 25px;
            }
          }
          >.span2{
            font-size: 30px;
          }
        }
      }
      >.p5{
        padding-top: 46px;padding-bottom: 18px;;
        >label{
          position: relative;display: inline-block;
          input{
            opacity: 0;position: absolute;z-index: 1;left: 0;top:0;width: 100%;height: 100%;
            &:hover{
              cursor: pointer;
            }
          }
          >span{
            color: #898989;line-height: 18px;position: relative;padding-left: 25px;display: inline-block;
            &:before{
              .checkBox;border-color: #BFBFBF;width: 18px;height: 18px;box-sizing: border-box;position: absolute;left: 0;top: 50%;margin-top: -9px;
            }
          }
          input:checked+span:before{
            .checked;width: 18px;height: 18px;box-sizing: border-box;position: absolute;left: 0;top: 50%;margin-top: -9px;
          }
        }
        >.agreement{
          .colorYellow;font-size: 14px;line-height: 18px;
          &:hover{
            cursor: pointer;
          }
        }
      }
      >.p6{
        position: relative;
        >#justPay{
          .submit();width: 300px;height: 46px;line-height: 46px;font-size: 18px;
        }
        >.tdspan{
          display: inline-block;width: 300px;height: 46px;position: absolute;left: 0;top:0;z-index: 1;
        }
      }
    }
    #sec2{
      >.p1{
        >span{
          vertical-align: middle;display: inline-block;
        }
        >.title{
          padding-bottom: 0;
        }
        .mark{
          background: url('../common/imgs/markbg1.png') center center no-repeat;background-size:100% 100%;text-align: center;color: #fff;font-size: 12px;
          display: inline-block;height: 21px;width: 64px;line-height: 21px;margin-left: 10px;
        }
        >.right{
          float: right;color: #262626c2;line-height: 24px;
          >span:last-child{
            padding-left: 45px;
          }
        }
      }
      >.p2{
        color: #999999;font-size: 14px;padding-top: 13px;
      }
      >.d3{
        padding-top: 32px;overflow: hidden;
        >span{
          line-height: 38px;display: inline-block;height: 38px;float: left;
        }
        >input{
          float: left;height: 38px;.input(38px , 177px , #F7F7F7);border: 1px solid#D2D2D2;margin:0 12px;text-align: center;
        }
        >.daysName{
          margin-right: 15px;
        }
        >.curDays{
          color: #C0C0C0;font-size: 16px;text-decoration: underline;margin-left: 25px;
          &:hover{
            cursor: pointer;.colorYellow;
          }
          &.chosed{
            .colorYellow;
          }
        }
      }
      >.p4{
        padding-top: 11px;color: #999999;font-size: 14px;overflow: hidden;
        >span{
          float: left;line-height: 105%;
          span{
            display: contents;
          }
        }

      }
      >.p5{
        padding-top: 32px;
        >span{
          display: inline-block;vertical-align: middle;
        }
        .electric{
          color: #262626;font-size: 16px;
        }
        .electricMoney{
          .colorYellow;font-size: 22px;padding-left: 10px;
        }
      }
      >.p6{
         padding-top: 32px;;
         label{
           position: relative;padding-left: 33px;text-align: left;display: block;
           span{
             color: #262626;font-size: 16px;line-height: 23px;vertical-align: middle;height: 23px;display: inline-block;
             &:before{
               .checkBox(23px , 23px);border-radius: 50%;position: absolute;left: 0;top:50%;margin-top: -12px;box-sizing: border-box;
             }
           }
           input{
             opacity: 0;position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 1;
             &:checked+span:before{
               .checkBox(23px , 23px);border-radius: 50%;position: absolute;left: 0;top:50%;margin-top: -12px;box-sizing: border-box;
               background: url('../common/imgs/whitegg.png') center center no-repeat;background-size:100% 100%;border:0;
             }
           }
         }
      }
      >.p7{
        height: 44px;line-height: 44px;padding-left: 21px;;background:#FCF9F0;color: #B38A43;font-size: 14px;margin-top: 13px;
        .border(#F1E8CC);
      }
    }
    #sec3{
      .p1{
        overflow: hidden;padding-top: 1px;
        label{
          position: relative;padding-left: 33px;text-align: left;display: block;float: left;
          span{
            color: #262626;font-size: 16px;line-height: 23px;vertical-align: middle;height: 23px;display: inline-block;
            &:before{
              .checkBox(23px , 23px);border-radius: 50%;position: absolute;left: 0;top:50%;margin-top: -12px;box-sizing: border-box;
            }
          }
          input{
            opacity: 0;position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 1;
            &:checked+span:before{
              .checkBox(23px , 23px);border-radius: 50%;position: absolute;left: 0;top:50%;margin-top: -12px;box-sizing: border-box;
              background: url('../common/imgs/whitegg.png') center center no-repeat;background-size:100% 100%;border:0;
            }
          }
        }
        .rule{
          float: right;line-height: 23px;color: #999999;font-size: 16px;text-decoration: underline;
        }
      }
      .p2{
        padding-top: 27px;
        span:first-child{
          color: #262626;font-size: 16px;vertical-align: middle;display: inline-block;
        }
        span:last-child{
          .colorYellow;font-size: 22px;padding-left: 14px;vertical-align: middle;display: inline-block;
        }
      }
      .d3{
        padding: 20px;background: #FCF9F0;.border(#F1E8CC);margin-top: 13px;
        p{
          color: #B38A43;font-size: 14px;padding-top: 14px;
          &:first-child{
            padding-top: 0;
          }
        }
      }
    }
  }
</style>
